<!DOCTYPE html>
<html lang="en">
<head>
    <<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app" class="content">
        <div class="form-div">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="数据库类型" prop="dataType">
                    <el-select v-model="form.dataType" placeholder="请选择数据库类型" @change="changeDriver()">
                        <el-option label="oracle" value="oracle"></el-option>
                        <el-option label="mysql" value="mysql"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input type="input" v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="url">
                    <el-input type="input" v-model="form.url"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即生成</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                visible: false,
                form: {
                    dataType: '',
                    url: '',
                    username: '',
                    password: '',
                    driver:'',
                },
                rules: {
                    dataType: [
                        { required: true, message: '请选择数据库类型', trigger: 'blur' },
                    ],
                    url: [
                        { required: true, message: '请输入数据数据库地址', trigger: 'blur' }
                    ],
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                }
            };
        },
        methods: {
            onSubmit() {
                console.log(this.$refs)
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.getCode()
                    } else {
                        return false;
                    }
                });
            },
            changeDriver(){
              switch (this.form.dataType) {
                case 'mysql':
                    this.form.driver = "com.mysql.cj.jdbc.Driver"
                      break
                case 'oracle':
                    this.form.driver = "oracle.jdbc.OracleDriver"
                      break
                default:
              }
            },
            // 从免费接口获取验证码
            async getCode(){
                axios.get("/database/database/to", {
                    params: this.form,
                    responseType: 'blob', // 切记类型 blob
                }).then(function(res){
                    console.log(res);
                    let blob = new Blob([res.data]);
                    let url = window.URL.createObjectURL(blob); // 创建 url 并指向 blob
                    let a = document.createElement('a');
                    a.href = url;
                    a.download = '数据库文档.docx';
                    a.click();
                    window.URL.revokeObjectURL(url); // 释放该 url
                }).catch((data) => {
                    this.$message.error('报错啦，请确认信息无误')
                });
            },
        }
    })
</script>
<style>
    .content{
        width: 100%;
        height: 500px;
    }
    .form-div{
        margin: 1% auto;
        padding: 45px 15px 15px;
        width: 40%;
        height: 98%;
        border: #b2b2b2 1px solid;
        border-radius: 5px;
    }
</style>
</html>
